<template>
  <div>
    <div class="commend_first">
      <div class="bgImg">
        <img :src="item.backgroundImg" />
      </div>
      <div class="title">
        <img :src="item.navNameImg" alt="" v-if="item.navNameImg" />
        <span v-else>{{ item.navName }}</span>
        <div>更多<i class="iconfont icon-youjiantou"></i></div>
      </div>
      <div class="swiper_box">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(v1, v1Index) in item.infos"
              :key="v1Index"
            >
              <img :src="v1.productImageUrl" alt="" />
              <p class="goodsName">{{ v1.productName }}？</p>
              <p class="goodsPrice">￥{{ v1.salePrice }}</p>
              <p class="oldPrice" v-if="index == 0">￥{{ v1.originPrice }}</p>
              <p class="saleNum" v-if="index == 2">已团购{{ v1.saleNum }}件</p>
            </div>
            <li>
              <p><i class="iconfont icon-youjiantou"></i></p>
              <span>More</span>
            </li>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div
        class="commend_second"
        v-for="(v2, v2Index) in item.rank"
        :key="v2Index"
      >
        <div class="title">
          <div class="concernPeople" :class="{ c1: index == 0 }">
            畅销榜第{{ v2.infos[0].num }}名
          </div>
          <div class="more">更多<i class="iconfont icon-youjiantou"></i></div>
        </div>
        <div class="goodsDetail">
          <img :src="v2.infos[0].productImageUrl" alt="" />
          <div class="cont">
            <p class="goodsName">{{ v2.infos[0].productName }}</p>
            <div>
              <span class="newPrice">￥{{ v2.infos[0].salePrice }}</span>
              <span class="oldPrice">￥{{ v2.infos[0].originPrice }}</span>
              <!-- <span class="manjian">199减40</span> -->
            </div>
            <div class="remark_box">
              <div class="remark">
                <i class="iconfont icon-pinglun"></i
                >{{ v2.infos[0].commentCount }}
              </div>
              <div class="score">
                <i class="iconfont icon-xingxing"></i
                >{{ v2.infos[0].averageScore }}
              </div>
              <div class="inCar"><i class="iconfont icon-gouwuche"></i></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 畅销商品 -->
  </div>
</template>

<script>
export default {
  props: ["item", "index"],
  data() {
    return {};
  },
  created() {},
};
</script>

<style lang="less" scoped>
.commend_first {
  width: 100%;
  height: auto;
  padding: 0px 13px 13px;

  box-sizing: border-box;
  position: relative;
  .title {
    text-align: center;
    position: relative;
    font-size: 18px;
    color: white;
    padding-top: 16px;
    padding-bottom: 10px;
    font-weight: bold;
    span {
      font-size: 16px;
    }
    img {
      margin: 0 auto;
      height: 17px;
    }
    div {
      position: absolute;
      right: 0;
      top: 15px;
      font-size: 12px;
      font-weight: normal;
      i {
        font-size: 12px;
      }
    }
  }
  .swiper-container {
    width: 100%;
    height: 100%;
    .swiper-wrapper {
      li {
        width: 60px;
        display: block !important;
        text-align: center;
        color: white;
        margin-top: 60px;
        margin-left: 15px;
        p {
          width: 15px;
          height: 15px;
          background-color: white;
          border-radius: 7.5px;
          line-height: 14px;
          text-align: center;
          margin-left: 10px;
          i {
            font-size: 12px;
            color: gray;
          }
        }
      }

      .swiper-slide {
        box-shadow: 0 0.03rem 0.12rem #d7d7d7 !important;
        border-radius: 5px;
        width: 29% !important;
        height: auto;
        text-align: center;
        font-size: 18px;
        background: #fff;
        overflow: hidden;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        // display: -webkit-flex;
        // display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        // -webkit-justify-content: center;
        // justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        // -webkit-align-items: center;
        // align-items: center;
        img {
          width: 100%;
          height: auto;
        }
        .goodsName {
          margin-top: 5px;
          text-indent: 12px;
          font-size: 12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .goodsPrice {
          margin-top: 10px;
          font-size: 16px;
          color: red;
        }
        .oldPrice {
          font-size: 12px;
          color: #565656;
          text-decoration: line-through;
        }
        .saleNum {
          font-size: 12px;
          color: #98a6aa;
        }
      }
    }
  }
  .bgImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    img {
      width: 100%;
      max-width: 750px;
    }
  }
}
// 公共样式2
.bottom {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  .commend_second {
    width: 100%;
    height: auto;
    margin-top: 10px;
    background-color: white;
    .title {
      // margin: 10px 0px;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      .concernPeople {
        // width: 100px;
        border-radius: 0px 0px 10px 0px;
        font-size: 14px;
        color: white;
        padding: 0px 5px;
        text-align: center;
        box-sizing: border-box;
        background-image: linear-gradient(133deg, #f296bd, #ee3b31);
      }
      .more {
        margin-right: 13px;
        font-size: 12px;
        color: #aac3e7;
        i {
          font-size: 12px;
        }
      }
    }
    .goodsDetail {
      display: flex;
      img {
        width: 20%;
        height: auto;
        margin: 0px 20px;
      }
      .cont {
        flex: 1;
        overflow: hidden;
        .goodsName {
          font-size: 14px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-bottom: 25px;
        }
        div {
          display: flex;
          align-items: center;
          &.remark_box {
            margin-top: 5px;
            justify-content: flex-end;
          }
          .newPrice {
            color: red;
            font-size: 14px;
            margin-right: 15px;
          }
          .oldPrice {
            color: #777777;
            text-decoration: line-through;
            font-size: 13px;
            margin-right: 15px;
          }
          .manjian {
            background-image: url(../../assets/images/manjian.png);
            font-size: 14px;
            color: white;
          }
          .remark {
            font-size: 12px;
            color: #98a6aa;
            margin-right: 15px;
          }
          .score {
            font-size: 12px;
            color: #98a6aa;
            margin-right: 15px;
            i {
              font-size: 12px;
              margin-right: 2px;
            }
          }
          .inCar {
            width: 25px;
            height: 25px;
            border-radius: 5px;
            border: 1px solid rgba(128, 128, 128, 0.596);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            i {
              font-size: 16px;
              color: red;
            }
          }
        }
      }
    }
  }
}
</style>